<!--
 * @Description: 历史数据
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:20:05
-->
  <template>
  <div>

    <!-- 树形控件 -->
    <el-col :span="6">
      <div class="empData" style="
              padding-right: 10px;
              border-right: 1px solid #ccc;
              height: calc(100vh - 60px);
            ">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="data" :props="defaultProps"
          :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
    </el-col>

    <!-- 右边内容 -->
    <el-col :span="18">
      <div v-if="params.device_id">
        <!-- 时间日期选择器 + 搜索按钮 -->
        <div class="header">
          <!-- value-format="timestamp" 将当前时间转换为时间戳 -->
          <!-- {{ params.timer }} -->
          <div class="table">
            <el-date-picker value-format="timestamp" v-model="params.timer" type="datetimerange"
              :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" align="right">
            </el-date-picker>
          </div>

          <el-button type="primary" @click="toSearch">搜索</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="content">
          <el-table :data="empData" style="width: 100%">
            <el-table-column prop="insert_time" label="日期" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.insert_time | fmtDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="180">
            </el-table-column>
            <el-table-column prop="pm10" label="pm10"> </el-table-column>
            <el-table-column prop="pm25" label="pm25"> </el-table-column>
            <el-table-column prop="temperature" label="温度">
            </el-table-column>
            <el-table-column prop="humidity" label="湿度"> </el-table-column>
            <el-table-column prop="wind_direction" label="风向">
            </el-table-column>
            <el-table-column prop="wind_speed" label="风速">
            </el-table-column>
          </el-table>
        </div>

      </div>

      <!-- 当用户没有点击设备时 -->
      <div v-else style="color: red; text-align: center">
        <el-empty :image-size="300" description="请选择设备查看"></el-empty>
      </div>
      
    </el-col>

  </div>
</template>

  <script>
import { get } from '@/utils/request'
export default {
    data() {
        return {
            // 设备采集的数据
            empData: [],
            // 过滤文本
            filterText: '',
            // 树形结构数据源
            data: [],
            // 树形结构配置项
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            // 时间日期选择器配置项
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        },
                    },
                ],
            },
            params: {
                page: 1,
                pageSize: 10,
                engineer_id: '',
                device_id: '',
            },
        }
    },
    watch: {
        // 监听文本进行过滤
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    computed: {},
    methods: {
        toSearch() {
            this.getEmpData()
        },
        // 点击树形节点
        handlerClick(data) {
            // data 点击工程 data---工程数据 children
            // data 点击设备 data---设备数据 没有children
            // 判断点击的是设备
            if (!data.children) {
                this.params.engineer_id = data.engineer_id
                this.params.device_id = data.id
            }
            if (data.children) {
                this.params.engineer_id = null
                this.params.device_id = null
            }
            this.getEmpData()
        },
        // 获取工程设备采集的数据--右侧数据
        async getEmpData() {
            // params page pageSize device_id e_id
            // 判断时间日期是否被选择
            if (this.params.timer) {
                this.params.begin_time = this.params.timer[0]
                this.params.end_time = this.params.timer[1]
                delete this.params.timer
            }
            let res = await get('/monitor/pageQuery', this.params)
            this.empData = res.data.list
        },
        // 获取工程设备 --左侧用到数据
        async loadEmpData() {
            let res = await get('/engineer/findEngineerDeviceTree')
            this.data = res.data
        },
        // 过滤节点的方法
        filterNode(value, data) {
            if (!value) return true
            // return data.label.indexOf(value) !== -1;
            return data.name.indexOf(value) !== -1
        },
    },
    created() {
        this.loadEmpData()
        this.getEmpData()
    },
    mounted() {},
}
</script>
  <style>

.header {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 8px;
    
    border-left: 5px solid rgb(248, 128, 128);
}
</style>